<template>
    <el-dialog v-model="localVisible" title="修改车位" width="30%" center @close="handleCancel">
      <el-form :model="UpdateForm" :rules="UpdateRules" ref="UpdateFormRef" label-position="top" label-width="0px">
        <el-form-item label="车位编号" prop="code">
          <el-input v-model="UpdateForm.code"></el-input>
        </el-form-item>
        <el-form-item label="停车场编号" prop="lotCode">
          <el-input v-model="UpdateForm.lotCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否可用" prop="isAvailable">
          <el-select v-model="UpdateForm.isAvailable" placeholder="请选择">
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否会员专属" prop="isMemberOnly">
          <el-select v-model="UpdateForm.isMemberOnly" placeholder="请选择">
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预定用户ID" prop="userId">
          <el-input v-model="UpdateForm.userId"></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button type="primary" @click="onUpdate">确定</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </span>
    </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';
import axios from 'axios';
import { defineProps, defineEmits } from 'vue';
import { ElMessage } from 'element-plus'

const api = axios.create({
    baseURL:'http://localhost:8092',
    headers: {
        'Authorization': `${localStorage.getItem('token')}`
    }
})

const props = defineProps({
  updateLotCode: String,
  updateIsAvailable: String,
  updateUserId: String,
  updateIsMemberOnly: String,
  updateCode: String,
  visible: Boolean,
  parkingSpaceId: Number // 确保这里正确声明了 parkingSpaceId
});

const emit = defineEmits(['update:visible', 'edit']); // 注意这里是 edit 而不是 add

const localVisible = ref(props.visible);

watch(() => props.visible, (newValue) => {
    localVisible.value = newValue;
});

watch(localVisible, (newValue) => {
if (!newValue) {
    emit('update:visible', false);
}
});
// 监听 props 变化并更新 UpdateForm
watch([() => props.updateLotCode, () => props.updateIsAvailable, () => props.updateUserId, () => props.updateIsMemberOnly, () => props.updateCode], ([newLotCode, newIsAvailable, newUserId, newIsMemberOnly, newCode]) => {
    UpdateForm.value.lotCode = newLotCode || '';
    UpdateForm.value.isAvailable = newIsAvailable !== undefined ? newIsAvailable : '';
    UpdateForm.value.userId = newUserId || '';
    UpdateForm.value.isMemberOnly = newIsMemberOnly !== undefined ? newIsMemberOnly : '';
    UpdateForm.value.code = newCode || '';
});

const UpdateForm = ref({
  lotCode: props.updateLotCode || '',
  isAvailable: props.updateIsAvailable !== undefined ? props.updateIsAvailable : '',
  userId: props.updateUserId || '',
  isMemberOnly: props.updateIsMemberOnly !== undefined ? props.updateIsMemberOnly : '',
  code: props.updateCode || ''
});
const UpdateRules = {
  code: [{ required: true, message: '请输入车位编号', trigger: 'blur' }],
  lotCode: [{ required: true, message: '请输入停车场编号', trigger: 'blur' }],
  isAvailable: [{ required: true, message: '请输入是否可用', trigger: 'blur' }],
  isMemberOnly: [{ required: true, message: '请输入是否会员专属', trigger: 'blur' }]
};

const UpdateFormRef = ref(null);

const onUpdate = () => {
  console.log(props.parkingSpaceId);
    const requestData = {
        id: props.parkingSpaceId,
        ...UpdateForm.value
    };
    console.log(JSON.stringify(UpdateForm.value));
    UpdateFormRef.value.validate((valid) => {
        if (valid) {
        api.put('/api/v1/parking-space/parking-space-info', requestData
            ).then(response => {
            if (response.data.code == "200"){
                ElMessage({
                title: '成功',
                message: '修改成功',
                type: 'success',
                showClose: false,
                });
                localVisible.value = false;
                emit('edit'); // 通知父组件数据已更新
            } else {
                ElMessage({
                title: '错误',
                message: '修改失败！' + response.data.message,
                type: 'error',
            });
            }
            }).catch(error => {
            ElMessage({
                title: '错误',
                message: '修改失败！' + error.message,
                type: 'error',
            });
            });
        } else {
        return false;
        }
    });
};

const handleCancel = () => {
    localVisible.value = false;
};
</script>
  
<style scoped>
  .dialog-footer {
    display: flex;
    justify-content: space-evenly; 
    margin-top: 20px; 
  }
  
  .dialog-footer .el-button {
    width: 30%;
    height: 45px; /* 调整按钮高度 */
    font-size: 16px;
    margin-top: 20px; 
  }
</style>